<template>
	<transition name="fade">
		<div class="pop-container" v-if="popshow"
		@click="">
			<div class="pop"
			:style="popstyle">
				<div class="pop-close">×</div>
				<slot></slot>
			</div>
		</div>
	</transition>
</template>
<script>
	export default{
		name:'pop',
		data(){
			return {

			}
		},
		watch:{
			popshow(val){
				if(!val) this.popClose()
			}
		},
		props:['popshow', 'popstyle', 'popClose']
	}
</script>
<style lang='less' scoped>
	.pop-container{
		position: fixed;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	    background: rgba(0, 0, 0, 0.2);
	    z-index: 100;
	    padding: .1px;
	    /*display:flex;*/
	    .pop{
	    	margin: 30% auto;
	    	width: 6.8rem;
	    	min-height: 50px;
	    	background: #fff;
	    	padding: .4rem;
	    	position: relative;
	    }
	}
</style>
<style>
	.pop-container{
		position: relative;
		padding: .4rem;
	}
	.pop{
		position: relative;
	}
	.pop-close{
		position: absolute;
		right: .3rem;
		top: 0;
		font-size: .6rem;
		color: #fb4a4a;
	}
</style>